import { useState } from 'react';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer, ProColumns, ProTable,ModalForm,ProFormText,ProFormTextArea, ProFormRadio } from '@ant-design/pro-components';
import { Button, Space } from 'antd';

function WorkList() {
  const [isShow,setIsShow] = useState(false)
  const columns:ProColumns[] = [
    {
      title:"序号",
      align:'center',
      hideInSearch:true,
      render(c,r,i){
        return i+1;
      }
    },{
      title:"名字",
      dataIndex:"name"
    },{
      title:"性别",
      dataIndex:"gender"
    },{
      title:"年龄",
      hideInSearch:true,
      dataIndex:"age"
    },{
      title:"头像",
      hideInSearch:true,
      render(v:any){
        return <img className='t-img' src={v.avatar} alt="" />
      }
    },{
      title:"联系电话",
      dataIndex:"mobile"
    },
    {
      title:"籍贯",
      dataIndex:"jiguan"
    },{
      title:"家庭住址",
      dataIndex:"address"
    },{
      title:"操作",
      hideInSearch:true,
      render(){
        return (
          <Space>
            <Button icon={<DeleteOutlined />} type='primary' size="small" danger />
            <Button icon={<EditOutlined />} type="primary" size='small' />
          </Space>
        )
      }
    }
  ]
  const data = [
    {
      id:1,
      name:'张三',
      age:37,
      jiguan:"河南驻马店",
      address:"上蔡县大王庄",
      mobile:"13513455323",
      gender:"男",
      avatar:"https://img0.baidu.com/it/u=3376302999,1946176586&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=525"
    },
    {
      id:2,
      name:'风间彻',
      age:35,
      jiguan:"河南信阳市",
      address:"大黑屋",
      mobile:"13533365323",
      gender:"男",
      avatar:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202011%2F13%2F20201113191426_f0570.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687949295&t=eced4ffe7e08ffee3f32c0122212be4b"
    },
    {
      id:3,
      name:'正南',
      age:34,
      jiguan:"北京市",
      address:"三里屯",
      mobile:"18459638563",
      gender:"男",
      avatar:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2Fd0678ec8-e1d7-461a-b82f-6cc2aad7d567%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687949401&t=54f6646f358d179aa7a94d5e308d842c"
    }
  ]
  return (
    <PageContainer>
      <ProTable
      columns={columns}
      dataSource={data}
      toolBarRender={()=>[<Button type="primary" icon={<PlusOutlined />} key={1} onClick={()=>setIsShow(true)} />]}
      />
      <ModalForm title="编辑" open={isShow} onOpenChange={setIsShow} modalProps={{maskClosable:false}} 
      onFinish={async (v)=>{
        console.log(v);
        
      }}
      >
        <ProFormText
        label="名字"
        placeholder="请输入名字"
        name='name'
        rules={[
          {
            required:true,
            message:"名字不能为空"
          }
        ]}
        ></ProFormText>
        <ProFormText
        label="籍贯"
        placeholder="请输入籍贯"
        name="jiguan"
        >

        </ProFormText>
        <ProFormText
        label="联系方式"
        placeholder="请输入联系方式"
        name="mobile"
        >

        </ProFormText>
        <ProFormTextArea
        label="家庭住址"
        placeholder="请输入家庭住址"
        name="address"
        >

        </ProFormTextArea>
        <ProFormRadio.Group
          name="gender"
          label="性别"
          options={[
          {
          label: '男',
          value: '男',
          },
          {
            label: '女',
            value: '女',
          },
        ]}
        />
      </ModalForm>
    </PageContainer>
  );
}

export default WorkList;
